<template>
  <div class="intro-container" element-loading-background="transparent" v-loading="loading">
    <div class="img">
      <!-- <el-image @click="handlePreview(data)" :src="data" alt /> -->
      <el-image v-if="data" :src="data" alt />
      <!-- <el-image fit="fill" :preview-src-list="[data]" :src="data"> </el-image> -->
    </div>
  </div>
</template>

<script setup>
import { getShiCSPGLByMarket } from "@/apis/subjectInfo";
import { ref } from "vue";
const data = ref();
const imgList = ref();
const loading = ref(false);
const getInfo = () => {
  loading.value = true;
  getShiCSPGLByMarket().then(res => {
    data.value = res.data[0].imgList[0];
    // imgList.value = res.data[0].imgList;
    loading.value = false;
  });
};
getInfo();
const handlePreview = list => {
  showImagePreview({ images: [list], closeable: true });
};
</script>

<style lang="scss" scoped>
.intro-container {
  height: 100%;
  overflow: hidden;
  position: relative;
  .img {
    display: flex;
    justify-content: center;
    img {
      width: 80%;
      height: 90%;
    }
    .el-image {
      width: 80%;
      height: 90%;
    }
  }
}
::v-deep .el-image {
  // position: absolute;
  width: 100%;
  max-height: 100%;
  // overflow: hidden;
}
</style>
